<template>
  <div class="page">
    <div class="page-top">
      <!-- 面包屑 -->
      <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
    </div>
    <div class="page-content">
      <a-form-model layout="inline" style="margin-bottom: 20px" :form="form" @submit="handleSubmit">
        <a-form-model-item label="创建时间">
          <a-range-picker show-time format="YYYY-MM-DD HH:mm:ss" v-model="timeValue" @change="bindTime" />
        </a-form-model-item>
        <a-form-model-item label="代理类型">
          <a-select default-value="全部" style="width: 100px" v-model="form.status">
            <a-select-option value=""> 全部 </a-select-option>
            <a-select-option value="NOPASS"> 未代理 </a-select-option>
            <a-select-option value="PASS"> 代理 </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="用户名">
          <a-input v-model="form.username"></a-input>
        </a-form-model-item>
        <a-form-model-item label="上级代理编号">
          <a-input v-model="form.parentId"></a-input>
        </a-form-model-item>
        <a-form-model-item label="关联客户">
          <a-input v-model="form.customerName"></a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" html-type="submit"> 提交 </a-button>
          <a-button style="margin-left: 15px" @click="bindReset">
            重置
          </a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table :columns="columns" :data-source="data" :loading="loading" :pagination="pagination"
        @change="handleTableChange">
        <span slot="options" slot-scope="text, record">
          <a-button type="primary" style="margin-right: 15px" @click="show(record)">关联客户</a-button>
          <a-button type="primary" @click="changeCus(record)">转正式代理</a-button>
        </span>
      </a-table>
      <a-modal :visible="visible" title="关联客户" @ok="onSubmit" @cancel="handleCancel" width="600px">
        <a-form-model :form="cusForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="客户ID">
            <a-input style="width:200px" v-model='cusForm.id'></a-input>
          </a-form-model-item>
          <a-form-model-item label="客户名称">
            <a-input style="width:200px" v-model='cusForm.name'></a-input>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { getAgentList, bindAgent, transCus } from "@/request/api";
export default {
  data() {
    return {
      loading: false,
      hreadcrumbAry: [
        { name: "首页", path: "/", query: {} },
        { name: "代理管理", path: "", query: {} },
        { name: "代理列表", path: "/AgentList", query: {} },
      ],
      columns: [
        {
          title: "创建日期",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "城市",
          dataIndex: "city",
          key: "city",
        },
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "关注酒水品类",
          dataIndex: "category",
          key: "category",
        },
        {
          title: "手机号",
          dataIndex: "phone",
          key: "phone",
        },
        // {
        //   title: "邀请码",
        //   dataIndex: "shareCode",
        //   key: "shareCode",
        // },
        // {
        //   title: "上级代理名称",
        //   dataIndex: "",
        //   key: "",
        // },
        {
          title: "代理类型",
          dataIndex: "status",
          key: "status",
        },
        {
          title: "关联客户名称",
          dataIndex: "scsCustomerName",
          key: "scsCustomerName",
        },
        {
          title: "当前用户ID",
          dataIndex: "id",
          key: "id",
          width: 200,
        },
        {
          title: "父节点ID",
          dataIndex: "parentId",
          key: "parentId",
          width: 200,
        },
        {
          title: "父节点用户名",
          dataIndex: "parentCustomerName",
          key: "parentCustomerName",
        },
        {
          title: "操作",
          dataIndex: "options",
          key: "options",
          width: 260,
          slots: { title: "操作" },
          scopedSlots: { customRender: "options" },
        },
      ],
      pagination: { current: 1, size: 10 },
      data: [],
      form: {
        username: '',
        startTime: "",
        endTime: "",
        status: "",
        parentId: "",
        customerName: "",
      },
      cusForm: {
        name: '',
        id: ''
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      timeValue: undefined,
      current: '',
      visible: false
    };
  },
  components: {
    Hreadcrumb,
  },
  created() {
    this.getAgentList(1, 10);
  },
  beforeCreate() {
  },
  methods: {
    async getAgentList(p, ps) {
      this.loading = true;
      let { startTime, endTime, customerName, parentId, status } = this.form;
      let params =
        "p=" +
        (p - 1) +
        "&ps=" +
        ps +
        "&startTime=" +
        startTime +
        "&endTime=" +
        endTime +
        "&status=" +
        status +
        "&parentId=" +
        parentId +
        "&customerName=" +
        customerName
      let { data } = await getAgentList(params);
      console.log(data);
      if (data.success) {
        this.loading = false;
        let pagination = { ...this.pagination };
        pagination.total = data.content.totalElements;
        this.pagination = pagination;
        this.data = data.content.content;
      } else {
        this.loading = false;
        this.data = [];
      }
    },
    async bindAgent() {
      let param = `id=${this.current}&scsCustomerId=${this.cusForm.id}&customerName=${this.cusForm.name}`
      let data = await bindAgent(param)
      console.log(data)
      if (data.data.success) {
        if (data.data.content == '成功') {
          this.$message.success("操作成功");
          this.visible = false
          this.current = ''
        } else {
          this.$message.error(data.data.content);
        }
      }
    },
    async transCus(id) {
      let param = 'id=' + id
      let data = await transCus(param)
      console.log(data)
      if (data.data.success) {
        if (data.data.content == '成功') {
          this.$message.success("操作成功");
        } else {
          this.$message.error(data.data.content);
        }
      }
    },
    changeCus(record) {
      let that = this
      this.$confirm({
        title: '确定转正式代理',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.transCus(record.id)
        },
        onCancel() {
          console.log('Cancel');
        },
      });

    },
    onSubmit() {
      console.log(this.current)
      this.bindAgent()
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getAgentList(pager.current, pager.size);
    },
    handleSubmit(e) {
      e.preventDefault();
      console.log(this.form);
      this.getAgentList(1, 10);
    },
    bindTime(date, dateString) {
      console.log(date, dateString);
      this.form.startTime = dateString[0];
      this.form.endTime = dateString[1];
    },
    bindReset() {
      this.form = {
        username: '',
        startTime: "",
        endTime: "",
        status: "",
        parentId: "",
        customerName: "",
      };
      this.timeValue = undefined;
      this.getAgentList(1, 10);
    },
    show(record) {
      this.visible = true
      this.current = record.id
    },
    handleCancel() {
      this.visible = false
      this.current = ''
    }
  },
};
</script>
<style>
.page-content {
  background-color: #fff;
  padding: 25px;
}
</style>